


let value = {"room":"test", "temperature":0, "humidity":0, "area": "", "cabinets": {"areas":[], "height": 2.43,  "gap": 0, "deep": 2.69, "offset": { "x": 0.2775, "y": 1.5365 }, "fix": 1, "item": [ ] } };




const Loading = { template: `<div><mt-header title="正在读取"></mt-header></div>`,

    //检查是否有数据，有则进入，无则初始化
     created () {
         this.$parent.bar_show = false;
        // router.push("/init/"+this.$route.params.room+"/"+this.$route.params.area)

        const self = this;
        axios.get("/geek/"+this.$route.params.room+"/"+this.$route.params.area+"/setupTable",
        {
        }).then(function(res){
          if(res.data){
                router.push("/index/"+self.$route.params.room+"/"+self.$route.params.area)
           }else{
                router.push("/init/"+self.$route.params.room+"/"+self.$route.params.area)
           }
            
        }).catch(function (error) {
            alert(error);
        });
   },
  methods:
  {
   
  },
}


const Init = { template: `
<div>
       
    <mt-header  :title="'第'+area+'区初始化项目'" ></mt-header>
       <h2></h2>
      <ul>  
         <mt-field label="纵向长度"  placeholder="密集柜纵向深度" type="number" v-model="data.cabinets.deep"></mt-field>
         <mt-field label="高度"  placeholder="密集柜高度" type="number" v-model="data.cabinets.height"></mt-field>
         <mt-field label="空隙"  placeholder="密集之间空隙" type="number" v-model="data.cabinets.gap"></mt-field>
         <mt-field label="标记X"  placeholder="标记X" type="number" v-model="data.cabinets.offset.x"></mt-field>
         <mt-field label="标记Y"  placeholder="标记Y" type="number" v-model="data.cabinets.offset.y"></mt-field>
         <div v-for = "(item, i) in data.cabinets.item">
            <h5>第{{i+1}}排  <b v-if="i == data.cabinets.fix">固定列</b><b v-if="item.type == 0">左活动柜</b><b v-if="item.type == 1">右活动柜</b></h5>
           
            <mt-field label="柜体宽度"  placeholder="柜体宽度" type="number" v-model="item.width"></mt-field>
            <div v-if="i != data.cabinets.fix">
                <mt-field label="距离(米)"  placeholder="密集柜最大间隔" type="number" v-model="item.channel"></mt-field>
                <mt-field label="刻度"  placeholder="密集柜间隔刻度" type="number" v-model="item.scale"></mt-field>
            </div>
         </div>
      </ul>
        <mt-button type="primary" @click="save()"> 初始化</mt-button>
         <br/>
         <br/> <br/>
         <br/> <br/>
         <br/>
     
    <p v-text="get" ></p>
</div>
`,
 data: function () {
        return {
        
            area:this.$route.params.area,
            room:this.$route.params.room,
            data:value,
            get:{}
        }
  },
  created () {
    this.$parent.bar_show = false;
        this.areaColumnConfiguration();  
        setTimeout(this.heartbeats, 500);
        this.timer = setInterval(this.heartbeats, 5000);
    },
    destroyed(){
        clearInterval(this.timer);
    },
    methods:
    {
         save(){
            const self = this;
            //alert("/geek/"+this.room+"/"+this.area+"/setupTable")
            Vue.$indicator.open();
            axios.put("/geek/"+this.room+"/"+this.area+"/setupTable", this.data)
            .then(function(res){
               // alert("!!!");
                router.push("/index/"+self.$route.params.room+"/"+self.$route.params.area)
                Vue.$indicator.close();
            }).catch(function (error) {
               // alert(error);
                Vue.$indicator.close();
            });
        },
        areaColumnConfiguration(){
            Vue.$indicator.open();
            axios.get("/geek/"+this.room+"/"+this.area+"/areaColumnConfiguration",
            {
            }).then(function(res){
            
                console.log(res.data);
                Vue.$indicator.close();
            }).catch(function (error) {
                alert(error);
                Vue.$indicator.close();
            });
        },
         handle(data){

            if(data.type == "areaColumnConfiguration"){
                let d  =JSON.parse(data.data);
               
                this.data = value;
                this.data.cabinets.item= []
                for(let r = 0; r<d.rooms.length; ++r){
                    const room = d.rooms[r];
                    if(room.name == this.room){
                        this.data.room = room.name;
                        this.data.temperature = room.temperature;
                        this.data.humidity = room.humidity;
                        let set = new Set();
                        for(let a =0; a<room.areas.length; ++a){
                             const areas = room.areas[a];
                             if(areas.name == this.area){
                                for(let c =0 ; c < areas.columns.length; ++c){
                                    const column = areas.columns[c];
                                    let item = {};
                                    item.name = column.name;
                                    item.area = column.area;
                                    set.add(column.area);
                                    item.index = column.index;
                                    item.type = column.type;
                                    item.width = 0.55;
                                    item.channel =  0.82;
                                    item.scale = 385;

                                    if(item.type == 2 ||item.type == 3 || item.type == 4){
                                        this.data.cabinets.fix = c;
                                    }
                                  
                                    item.layers = column.layers;
                                    item.left = column.left.split(',');
                                    item.right = column.right.split(',');
                                    this.data.cabinets.item.push(item);
                                }

                                this.data.cabinets.areas = Array.from(set);
                             }
                        }
                    }
                }
                 this.data.area = this.area;
                 this.data.room = this.room;

                 
                 this.get = this.data;
           
                clearInterval(this.timer);
             
            }
        },
        heartbeats(){
           const self = this;
           axios.get("/geek/"+this.room+"/"+this.area+"/heartbeats",
           {

           }).then(function(res){
                
                console.log(res.data);
                for(let i =0; i<res.data.length; ++i){
                    self.handle(res.data[i]);
                }
            
            }).catch(function (error) {
                alert(error);
            });
        },
   
    },

}




const About = { template: `
<div>
       
<mt-header title="联系我们"></mt-header>
 <mt-cell title="技术服务" label="拨号:王工" to="tel:15601920021" is-link></mt-cell>
 <mt-cell title="售后服务" label="拨号:李工" to="tel:15601920021" is-link></mt-cell>
</div>
`,

  created () {this.$parent.bar_show = true;},
  methods:
  {
    
   
   
  },

}






const Status = { template: `
<div>

<mt-header  :title="'第'+area+'区当前状态'" >
 
</mt-header>

<mt-cell title="温度:">
  <span style="color: green">{{temperature/10}}℃</span>
</mt-cell>

<mt-cell title="湿度:">
  <span style="color: green">{{humidity}}%</span>
</mt-cell>


</div>
`,
    data: function () {
        return {
            area:this.$route.params.area,
            room:this.$route.params.room,
            temperature:-1,
            humidity:-1,
            timer:null,
        }
    },
    created () {
    
        this.$parent.bar_show = true;
        this.areaColumnConfiguration();
        setTimeout(this.heartbeats, 500);
        this.timer = setInterval(this.heartbeats, 5000);
    },
    destroyed(){
        clearInterval(this.timer);
    },

    methods:
    {
        areaColumnConfiguration(){
        
            Vue.$indicator.open();
            axios.get("/geek/"+this.room+"/"+this.area+"/areaColumnConfiguration",
            {
            }).then(function(res){
                console.log(res.data);
                
                Vue.$indicator.close();
            }).catch(function (error) {
                alert(error);
                Vue.$indicator.close();
            });
        },
        handle(data){

            if(data.type == "areaColumnConfiguration"){
                let d  =JSON.parse(data.data);
                for(let i =0;i<d.rooms.length; ++i){
                    if(d.rooms[i].name == this.room){
                        this.temperature = d.rooms[i].temperature;
                        this.humidity = d.rooms[i].humidity;
                    }
                }
            }
            if(data.type == "temperatureAndHumidity"){
                let d = JSON.parse(data.data);
                this.temperature = d.temperature;
                this.humidity = d.humidity;
            }



           
           
        },
        heartbeats(){
           let self = this;
           axios.get("/geek/"+this.room+"/"+this.area+"/heartbeats",
           {

           }).then(function(res){
                
                console.log(res.data);
                for(let i =0; i<res.data.length; ++i){
                    self.handle(res.data[i]);
              
                }
            
            }).catch(function (error) {
                alert(error);
            });
        }
   
   
    },

}





const routes = [
  { path: '/init/:room/:area', component:Init },
  { path: '/index/:room/:area', component: Status },
  { path: '/operate/:room/:area', component: Operate },
  { path: '/setup/:room/:area', component: Setup },
  { path: '/goods/:room/:area', component: Goods },
  { path: '/check/:room/:area', component: Check },
  { path: '/about', component: About },
  { path: '/loading/:room/:area', component: Loading },
]

const router = new VueRouter({
  routes
})

